<template>
  <div>
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix">
        <span>{{year}}年工作热力图</span>
      </div>
      <div
        id="heat"
        style="width:90%;height:200px;">
      </div>
    </el-card>
  </div>
</template>
<script >
import echarts from 'echarts'
import axios from 'axios'
require('echarts/theme/macarons')

export default {
  name: 'heat-calendar',
  data () {
    return {
      charts: '',
      diaryList: '',
      chartData: [],
      year: '2018'
    }
  },
  methods: {
    makeData () {
      axios({
        method: 'post',
        url: 'api/getheatmapdata',
        data: {
          user_token: this.$store.state.token,
          selsectTime: 'thisyear'
        }
      })
      .then((res) => {
        if (res.data.code === '200') {
          this.diaryList = res.data.data
          for (let item in this.diaryList) {
            this.chartData.push([echarts.format.formatTime('yyyy-MM-dd', item), this.diaryList[item]['total_time']])
          }
          this.charts.setOption({
            series: {
              data: this.chartData
            }
          })
        } else if (res.data.code === '400') {
        }
        this.charts.hideLoading()
      })
      .catch((res) => {
        this.charts.hideLoading()
        this.$store.commit('openMessage', '请求失败，内部错误')
      })
    },
    makeCalendar () {
      this.charts = echarts.init(document.getElementById('heat'), 'macarons')
      this.charts.showLoading()
      this.charts.setOption({
        visualMap: {
          min: 0,
          max: 24,
          calculable: true,
          orient: 'horizontal',
          left: 'right',
          top: 'top'
        },
        calendar: {
          range: this.year,
          cellSize: ['auto', 20]
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar'
        },
        tooltip: {
          formatter: function (p) {
            let format = echarts.format.formatTime('yyyy-MM-dd', p.data[0])
            let showData = '日期:' + format + '<br>工作时长:' + p.data[1]
            return showData
          }
        }
      })
      this.makeData()
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.makeCalendar()
    })
  }
}
</script>